<template>
  <div id="Right" ref="right">
    <div v-for="(item, index) in resData" :key="index" class="item">
      {{ index + 1 }} {{ item.child }}
    </div>
    <div class="spance"></div>
  </div>
</template>

<script>
export default {
  props: {
    resData: {
      type: Array, // 类型
      required: true, // 是否必须
      default: () => {
        // 返回值
        return [];
      },
    },
  },
  methods: {
    fnc() {
      let topS = this.$refs.right.scrollTop;
      this.items.forEach((item, index) => {
        //0  -200 1
        //200-400 2
        //400-600 3
        if (topS>=item.offsetTop&&topS<=(item.offsetTop+item.offsetHeight)) {
          this.$bus.$emit("resIndex", index);
        }
      });
    },
  },
  mounted() {
    let that = this;
    console.log(that)
    that.bbb = "zzz"
    that.items = document.querySelectorAll(".item");
    // 监听左侧组件的发送过来的(左侧点击了让他滚动到对应位置)
    that.$bus.$on("sendIndex", (index) => {
      that.items[index].scrollIntoView({ behavior: "smooth" });
    });

    that.$refs.right.onscroll = function () {
    //   that.fnc();
     let topS = that.$refs.right.scrollTop;
      that.items.forEach((item, index) => {
        //0  -200 1
        //200-400 2
        //400-600 3
        if (topS>=item.offsetTop&&topS<=(item.offsetTop+item.offsetHeight)) {
          that.$bus.$emit("resIndex", index);
        }
      });
    };
  },
};
</script>

<style scoped>
.right {
    background: red;
}
.item {
  width: 100%;
  height: 2rem;
}
.spance {
  height: 5rem;
}
</style>